<template>
	<view>
		<view class="threadView-box" style="padding: 20rpx 34rpx;">
			<u-sticky h5-nav-height="-30" @fixed="fixed" @unfixed="unfixed">
				<u-navbar back-text="" back-icon-color="#000" back-icon-size="50" title="" :border-bottom="false" height="60">
					<view class="slot-wrap">
						<view class="right" v-if="!fixeds">
							<u-button type="primary" size="medium">复制本贴信息</u-button>
						</view>
						<view class="left subjects" v-if="fixeds">
							{{subject}}
						</view>
					</view>
				</u-navbar>
			</u-sticky>

			<view class="threadInfo u-skeleton">
				<view class="threadView u-skeleton-rect" style="min-height:70rpx;">
					<text class="subject ">{{threadView.subject}}</text>
				</view>
				<view class="datlineinfo about-data" style="display: flex;">
					<text class="u-skeleton-rect au">{{threadView.author}}</text>
					<text class="u-skeleton-rect au">{{threadView.replies}}评</text>
					<text class="u-skeleton-rect au">{{$u.timeFrom(threadView.postdate, 'yyyy年mm月dd日')}}</text>
				</view>
				<view class="content u-skeleton-rect">
					<u-parse :html="threadView.content" :show-with-animation="true" :tag-style="style" :selectable="true"></u-parse>
				</view>
			</view>
			<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true" firsttop="71"></u-skeleton>
		</view>

		<view class="line"></view>
		<view class="comments" v-if="!loading">
			<text class="pro">评论</text>
			<view class="comments-list">
				<reply :options="v" v-for="(v,k) in threadRepies"></reply>
			</view>
		</view>
	</view>
</template>

<script>
	import reply from './reply.vue'
	export default {
		components: {
			reply
		},
		data() {
			return {
				fixeds: 0,
				tid: 0,
				subject: "帖子详情",
				offset: 0,
				loading: true,
				threadView: [],
				threadRepies: [],
				style: {
					img: 'margin: 20rpx 0',
					p: 'font-size: 36rpx;',
					font: 'font-size: 36rpx !important;color:#000',
					br: 'content:"";height:30rpx;display: block;',
				}
			}
		},
		onLoad(options) {
			const tid = options.tid;
			this.tid = tid;
			this.$u.http.setConfig({
				showLoading: false,
			})
			this.$u.post('plugin.php?id=qianfan:index&controller=thread&from_newapp=mala', {
				action: "getthread",
				tid: tid,
				limit: 30,
				offset: this.offset
			}).then(res => {


				let Newdata = []
                res.thread.subject = res.thread.subject.replace("<br>","");
				this.threadView = res.thread;
				this.threadRepies = res.replies;
				this.subject = res.thread.subject;
				this.loading = false;


			}).catch(res => {
				// this.error = 1;
			});
		},
		methods: {
			fixed() {
				this.fixeds = 1
			},
			unfixed() {
				this.fixeds = 0
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;

	}

	.comments {
		padding: 20rpx 0;
	}

	.comments .pro {
		font-size: 34rpx;
		position: relative;
		padding-left: 54rpx;
	}

	.comments .pro:after {
		position: absolute;
		width: 4px;
		top: 8rpx;
		height: 36rpx;
		content: '';
		left: 30rpx;
		border-radius: 10px;
		background-color: #2979ff;
	}

	.line {
		background-color: #f6f6f6;
		height: 10rpx;
		width: 100%;
	}

	.u-skeleton-rect {
		min-width: 40rpx;

	}

	.content {
		margin-top: 20rpx;
		line-height: 66rpx;
		font-size: 38rpx;
		min-height: 500rpx;
		color: #000;
	}

	.content image {
		margin: 20rpx 0;
	}

	.about-data {
		margin-top: 20rpx;
		color: #999;
		font-size: 26rpx;
	}

	.about-data text {
		margin-right: 10rpx;
	}

	.subject {
		font-size: 50rpx;
		text-align: justify;
		color: #000;
		font-weight: 450;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
	}

	.u-tabs {
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}

	.right {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
</style>
